import React from "react";


function ListItem(props) {
    return <li>{props.value}</li>;
}

function NumberList(props) {
    const numbers = props.numbers;
    const listItems = numbers.map((number) =>
        <ListItem key={number.toString()}
                  value={number}/>
    );
    return (
        <ul>
            {listItems}
        </ul>
    );
}

function Blog(props) {
    const sidebar = (
        <ul>
            <li key="sidbar">
                sidbar
            </li>
            {props.posts.map((post) =>
                <li key={post.id}>
                    {post.title}
                </li>
            )}
        </ul>
    );
    const content =
        <React.Fragment>
        {props.posts.map((post) =>
            <div key={post.id}>
                <h4>{post.title}</h4>
                <p>{post.content}</p>
            </div>
        )}
        </React.Fragment>

    return (
        <div>
            {sidebar}
            <hr/>
            {content}
        </div>
    );
}

export default class KeyUsage extends React.Component {

    constructor(props) {
        super(props);
        this.state = {numbers: props.numbers};
    }
    render() {
        if(this.state.numbers===null||this.state.numbers===""){
            console.log('null')
        }
        else {
            console.log(this.state.numbers);
        }

        const posts = [
            {id: 1, title: 'Hello World', content: 'Welcome to learning React!'},
            {id: 2, title: 'Installation', content: 'You can install React from npm.'}
        ];

        return (
            <React.Fragment>
            <h3>KEYUSAGE</h3>
            {NumberList({numbers: this.state.numbers})}
            <Blog posts={posts}/>
            </React.Fragment>
        );
    }
};
